<template>
    <div>
        <!-- 问候页 -->
       <el-row>
           <el-col :span="24">
               <h1 class="guide">QUICK GUIDE 快速指南</h1>
               <p>在这里，你可以快速熟悉知识图谱的使用，无论你是专业的小说作家，还是业余的小说爱好者，都可以探索出一片新的天地！</p>
           </el-col>
       </el-row>
        <!-- 统计功能 -->
        <el-row>
           <el-col :span="24">
               <h1 class="guide"><i class="el-icon-data-line guide"></i>统计功能</h1>
           </el-col>
        </el-row>
        <el-row :gutter="20">
           <el-col :span="6"><StatisCard :type=type_0></StatisCard></el-col>
           <el-col :span="6"><StatisCard :type=type_1></StatisCard></el-col>
           <el-col :span="6"><StatisCard :type=type_2></StatisCard></el-col>
           <el-col :span="6"><StatisCard :type=type_3></StatisCard></el-col>
        </el-row>
        <!-- 可视化功能 -->
        <el-row>
           <el-col :span="24"><h1 class="guide"><i class="el-icon-view"></i>可视化功能</h1></el-col>
        </el-row>
        <el-row>
           <el-col :span="6" :offset="2"><VisualCard :type=type_1></VisualCard></el-col>
           <el-col :span="6" :offset="1"><VisualCard :type=type_0></VisualCard></el-col>
           <el-col :span="6" :offset="1"><VisualCard :type=type_2></VisualCard></el-col>
        </el-row>
        <!-- 智能问答功能 -->
        <el-row>
           <el-col :span="24"><h1 class="guide"><i class="el-icon-chat-dot-round"></i>智能问答功能</h1></el-col>
        </el-row>
        <el-row>
           <el-col :span="8" :offset="8"><FaqQueryCard :type=type_0></FaqQueryCard></el-col>
        </el-row>
        <!-- 高级问答功能 -->
        <el-row>
           <el-col :span="24"><h1 class="guide"><i class="el-icon-search"></i>高级查询功能</h1></el-col>
        </el-row>
        <el-row>
           <el-col :span="8" :offset="8"><FaqQueryCard :type=type_1></FaqQueryCard></el-col>
        </el-row>
    </div>
</template>
<script>
import StatisCard from '@/components/Guide/StatisCard'
import VisualCard from '@/components/Guide/VisualCard'
import FaqQueryCard from '@/components/Guide/FaqQueryCard'
export default {
  data () {
    return {
      type_0: 0,
      type_1: 1,
      type_2: 2,
      type_3: 3

    }
  },
  components: {
    StatisCard, VisualCard, FaqQueryCard
  }
}
</script>
<style scoped>
.guide{
    font-size: 40px;
}
i{
    margin-right: 20px;
}
</style>
